class BigImg {
    constructor() {
        this.sBox = document.querySelector(".jqzoom");
        this.sBimg = document.querySelector(".jqzoom img");
        this.sBspan = document.querySelector(".jqzoom span");
        this.bBox = document.querySelector("#photolist");
        this.bBimg = document.querySelector("#photolist img");

        this.li = document.querySelectorAll(".leftBox li");

        // 0. 模拟放大镜图片数据
        this.data = [{
            small: "./imgs/s0.jpg",
            middle: "./imgs/m0.jpg",
            large: "./imgs/l0.jpg"
        }, {
            small: "./imgs/s1.jpg",
            middle: "./imgs/m1.jpg",
            large: "./imgs/l1.jpg"
        }, {
            small: "./imgs/s2.jpg",
            middle: "./imgs/m2.jpg",
            large: "./imgs/l2.jpg"
        }]

        // 1. 设定默认索引
        this.index = 0;
        // 2. 根据默认索引初始化样式
        this.init();
        // 3. 绑定事件
        this.addEvent()
    }
    init() {
        for (let i = 0; i < this.li.length; i++) {
            this.li[i].style.borderColor = "transparent";
        }
        this.li[this.index].style.borderColor = "blue";
        this.sBimg.src = this.data[this.index].middle;
        this.bBimg.src = this.data[this.index].large;
    }
    addEvent() {
        const that = this;
        for (let i = 0; i < this.li.length; i++) {
            this.li[i].index = i;
            this.li[i].onclick = function() {
                // 4. 取消默认索引对应的样式，并给当前点击的索引添加样式
                that.li[that.index].style.borderColor = "transparent";

                that.li[this.index].style.borderColor = "blue";
                that.sBimg.src = that.data[this.index].middle;
                that.bBimg.src = that.data[this.index].large;

                // 5. 点击功能执行结束后，将默认索引修改成点击的索引
                that.index = this.index;
            }
        }
        this.sBox.onmouseover = function() {
            that.show()
        }
        this.sBox.onmouseout = function() {
            that.hide()
        }
        this.sBox.onmousemove = function(eve) {
            const e = eve || window.event;
            that.move(e)
        }
    }
    show() {
        this.sBspan.style.display = "block";
        this.bBox.style.display = "block";
        this.sBspan.style.width = this.bBox.offsetWidth / this.bBimg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sBspan.style.height = this.bBox.offsetHeight / this.bBimg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    hide() {
        this.sBspan.style.display = "none";
        this.bBox.style.display = "none";
    }
    move(e) {
        let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth / 2;
        let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight / 2;
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > this.sBox.offsetWidth - this.sBspan.offsetWidth) {
            l = this.sBox.offsetWidth - this.sBspan.offsetWidth
        }
        if (t > this.sBox.offsetHeight - this.sBspan.offsetHeight) {
            t = this.sBox.offsetHeight - this.sBspan.offsetHeight
        }
        this.sBspan.style.left = l + "px";
        this.sBspan.style.top = t + "px";
        const x = l / (this.sBox.offsetWidth - this.sBspan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sBspan.offsetHeight);
        this.bBimg.style.left = -x * (this.bBimg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bBimg.style.top = -y * (this.bBimg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
}
new BigImg();